<template>
  <div class="websiteInfo">
    <el-card shadow="hover" class="m-b-10">
      <div slot="header">
        <span>网站头像</span>
      </div>
      <el-upload
        class="w-70 h-70 flex-center"
        action="http://localhost:3000/admin/uploadArticleTypesIcon"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
          <img v-if="websiteInfo.iconUrl" class="W100" :src="websiteInfo.iconUrl">
          <i v-else class="el-icon-plus"></i>
      </el-upload>      
    </el-card>

    <el-card shadow="hover" class="m-b-10">
      <div slot="header">
        <span>网站中文名</span>
      </div>
      <el-input style="width: 80%" v-model="websiteInfo.zhName" placeholder="新的网站中文名"></el-input>
    </el-card>

    <el-card shadow="hover" class="m-b-10">
      <div slot="header">
        <span>网站英文名</span>
      </div>
      <el-input style="width: 80%" v-model="websiteInfo.engName" placeholder="新的网站英文名"></el-input>
    </el-card>

    <el-card shadow="hover" class="m-b-10">
      <div slot="header">
        <span>网站主人</span>
      </div>
      <el-input style="width: 80%" v-model="websiteInfo.master" placeholder="新的主人名"></el-input>
    </el-card>
    <el-button class="W100" @click="save">保存</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      websiteInfo: {
        zhName: '',
        engName: '',
        iconUrl: '',
        master:''
      },
    }
  },
  created() {
    this.getWebsiteInfo()
  },
  methods: {
    async getWebsiteInfo() {
      let res = await this.api.get('/getWebsiteInfo')
      if (res.code == 0 && res.data.length !== 0) {
        this.websiteInfo = res.data
      }
      else this.$message({type: 'warning', message: res.message})
    },
    handleAvatarSuccess(res, file) {
      this.websiteInfo.iconUrl = res.data.address
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    async save() {
      let res = await this.api.post('/admin/updateWebsiteInfo', {
        ...this.websiteInfo
      })
      if (res.code == 0) {
        this.websiteInfo = res.data[0] 
        this.getWebsiteInfo()
        this.$message({type: 'warning', message: res.message})
      }
      else this.$message({type: 'warning', message: res.message})
    }
  }
}
</script>

<style>

</style>